<!--
* @description 单位排名
* @author zywu
* @date 2021/03/19 14:18:52
!-->
<template>
  <div class="inspect-unitrank">
    <van-nav-bar title="单位排名" fixed left-arrow @click-left="onClickLeft" />
    <div class="inspect-unitrank__filter d-flex ai-center jc-between">
      <pop-action text="倒序" cancel-text default-value="desc" show-selected :options="sortRules" @change="onSortChange"></pop-action>
      <pop-action
        ref="myLabelAction"
        text="标签"
        :default-value="defaultLabel"
        :options="labelList"
        show-selected
        @change="v=>{onPickerChange('labelId',v)}"
        style="width:80px;"
      ></pop-action>
      <pop-date-picker ref="myDatepicker" :default-date="defaultDate" @change="handleDateChange"></pop-date-picker>
    </div>
    <div class="page-body--padding">
      <sta-unit-rank v-if="dataList.length>0" :dataList="sortedDataList"></sta-unit-rank>
      <div v-else class="no-data-img">
        <img src="../../assets/img/common/defaultnone.png" />
      </div>
    </div>
  </div>
</template>

<script>
import PopAction from '@/components/PopAction'
import PopDatePicker from '@/components/PopDatePicker'
import StaUnitRank from './StaUnitRank.vue'
import { sortRules } from '@/config/dict'
import { mapState, mapGetters } from 'vuex'
import { getExamineTaskOrgOrder } from '@/api/inspect'
import { getLableList } from '@/api/common'

export default {
  data() {
    return {
      sortRules,
      labelList: [],
      dataList: [],
      defaultLabel: '',
      defaultDate: new Date(),
      sortValue: 'desc',
    }
  },

  computed: {
    ...mapState(['userInfo']),
    ...mapGetters(['userFullOrgIds']),
    sortedDataList() {
      return this.sortValue == 'desc'
        ? this.dataList
        : JSON.parse(JSON.stringify(this.dataList)).reverse()
    },
  },

  components: {
    PopAction,
    PopDatePicker,
    StaUnitRank,
  },

  created() {
    let { labelId, startTime, endTime } = this.$route.params
    this.labelId = labelId || ''
    this.defaultLabel = labelId
    this.startTime = startTime
    this.endTime = endTime
    this.defaultDate = this.$moment(startTime.substr(0, 7), 'yyyy-MM').toDate()
    this.setTime(this.defaultDate)
    this.getLableList()
    this.getExamineTaskOrgOrder()
  },

  methods: {
    onSortChange(obj) {
      this.sortValue = obj.value
    },
    getLableList() {
      getLableList({ type: 1 }).then((res) => {
        this.labelList = res.data.map((n) => {
          n.value = n.id
          return n
        })
        this.$nextTick(() => {
          this.$refs.myLabelAction.setSelected(this.labelId)
        })
      })
    },
    handleDateChange(val) {
      this.setTime(val)
      this.getExamineTaskOrgOrder()
    },
    setTime(dateObj) {
      let dateStr = this.$moment(dateObj).format('yyyy-MM')
      this.startTime = `${dateStr}-01 00:00`
      this.endTime =
        this.$moment(
          this.$moment(
            new Date(dateObj.getFullYear(), dateObj.getMonth() + 1, 1)
          )
            .subtract(1, 'days')
            .toDate()
        ).format('yyyy-MM-DD') + ' 23:59'
    },
    getExamineTaskOrgOrder() {
      getExamineTaskOrgOrder({
        orgIds: this.userFullOrgIds,
        status: 2,
        labelId: this.labelId || '',
        queryTimeType: 2,
        startTime: this.startTime,
        endTime: this.endTime,
      }).then((res) => {
        this.dataList = res.data
      })
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    onPickerChange(key, val) {
      this.labelId = val.value
      this.getExamineTaskOrgOrder()
    },
  },
}
</script>
<style lang='scss'>
.inspect-unitrank {
  padding-top: 51px;
  &__filter {
    position: fixed;
    top: 46px;
    left: 0;
    right: 0;
    padding: 5px 15px 0;
    background: #fff;
    z-index: 10;
  }
  .inspect-ranklist {
    margin-top: 50px;
  }
  .page-body--padding {
    padding-top: 5px;
  }
}
</style>